<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/12/30
  Time: 15:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>速卓电子签章</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" type="text/css" href="/lib/layui/layui/css/layui.css?20210319.1"/>
    <script type="text/javascript" src="/lib/layui/layui/layui.all.js"></script>
    <script type="text/javascript" src="/js/news/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/js/login/jsencrypt.js"></script>
    <script type="text/javascript" src="/js/login/login.js"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>

</head>
<style>
    .headTop .divTitle {
        float: left;
        height: 45px;
        line-height: 45px;
        font-size: 22px;
        margin-left: 10px;
        color: #494d59;
    }
    .headTop{
        width: 100%;
        top:0px;
        left: 0px;
        height: 45px;
        border-bottom: 1px solid #999;
        background: #fff;
        overflow: hidden;
        z-index: 9999999;
        background: #fff;
    }
    .headTop .headImg {
        float: left;
        width: 23px;
        height: 100%;
        margin-left: 30px;
    }
    .headImg img {
        width: 23px;
        height: 23px;
        margin-top: 11px;
        vertical-align: middle;
    }
    .layui-form-pane .layui-form-label {
        width: 120px;
    }
</style>
<body>

<div class="headTop" style="border-bottom: 0px;">
    <div class="headImg">
        <img src="/img/commonTheme/${sessionScope.InterfaceModel}/yinzhang.png">
    </div>
    <div class="divTitle" style="margin-left: 15px;">
        <span class="titleSign" style="display: block;">速卓电子签章</span>
    </div>
    <div style="float: right;    margin-top: 10px; margin-right: 10px;">
        <button type="button" id="addnormal" class="layui-btn layui-btn-normal layui-btn-sm">添加印章</button>
        <button type="button" id="pfxBut" class="layui-btn layui-btn-sm">数字证书管理</button>
    </div>
</div>


<table class="layui-table" lay-skin="line" lay-filter="demo" id="demo"></table>

</body>
<script type="application/javascript" >
    var  userId = '', userName = '',deptId='',deptName='';

    $(function(){
        //当前登录人
        $.ajax({
            url: '/Meetequipment/getuser',
            type: 'get',
            dataType: 'json',
            success: function (res) {
                userId = res.object.userId
                userName = res.object.userName
                deptId = res.object.deptId
                deptName = res.object.deptName
            }
        })
    })

    $('#addnormal').click(function(){
        addSign('添加印章','');
    });

    $('#pfxBut').click(function(){
        layui.layer.open({
            type: 1
            , title: '数字证书管理'
            , btn: ['确定']
            , area: '30%'
            , maxmin: true
            , btnAlign: 'c'
            , btn: ['确定','返回']
            , content: '<div class="layui-form layui-form-pane"  style="margin: 10% 10%;">' +

                '  <div class="layui-form-item" pane>\n' +
                '    <label class="layui-form-label">文件名称</label>\n' +
                '    <div class="layui-input-block">\n' +
                '       <div class="layui-form-mid" id="mIdName"  attachid="" attachold="" attachName="" style="margin-left: 20px;" >请上传文件</div>\n' +
                '    </div>\n' +
                '  </div>' +

                '  <div class="layui-form-item" pane>\n' +
                '    <label class="layui-form-label">选择证书文件</label>\n' +
                '    <div class="layui-input-block">\n' +
                '      <button type="button" id="test2" style="margin-left: 20px;margin-top: 3px;" class="layui-btn layui-btn-normal layui-btn-sm"> <i class="layui-icon">&#xe67c;</i>上传文件</button>\n' +
                '    </div>\n' +
                '  </div>' +

                '  <div class="layui-form-item" >\n' +
                '    <label class="layui-form-label">证书密码</label>\n' +
                '    <div class="layui-input-block">\n' +
                '      <input type="password" id="pas2"  placeholder="请输入密码" autocomplete="off" class="layui-input" style="width: 96%;">\n' +
                '    </div>\n' +
                '  </div>' +
                '</div>'
            ,success: function(layero, index) {

                //执行实例
                layui.upload.render({
                    elem: '#test2' //绑定元素
                    ,url: '/upload' //上传接口
                    ,data:{
                        module:'pfx'
                    }
                    ,accept:'file'
                    ,choose: function(obj){
                        //将每次选择的文件追加到文件队列
                        var files = obj.pushFile();

                        //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                        obj.preview(function(index, file, result){
                            $('#mIdName').html(file.name + '<i class="layui-icon layui-icon-close" onclick="shanchu()" style="font-size: 20px; color: #1E9FFF;  position: absolute; top: 10px;"></i> ');

                        });
                    }
                    ,done: function(res){
                        //上传完毕回调
                        if (res.flag){
                            $('#mIdName').attr('attachid',res.obj[0].attachId);
                            $('#mIdName').attr('attachName',res.obj[0].attachName);
                        }
                    }
                    ,error: function(){
                        //请求异常回调
                    }
                });

                $.get('/syspara/selectTheSysPara',{
                    paraName:'PFX_ATTACH'
                },function(res){
                    if (res.flag){
                        var obj = res.object[0];
                        if (obj.paraValue != ''){
                            var spl = obj.paraValue.split('*');
                            $('#mIdName').attr('attachid',spl[0]);
                            $('#mIdName').attr('attachold',spl[0]);
                            $('#mIdName').attr('attachName',spl[1]);
                            $('#mIdName').html(spl[1] + '<i class="layui-icon layui-icon-close" onclick="shanchu()" style="font-size: 20px; color: #1E9FFF;  position: absolute; top: 10px;"></i> ');
                        }


                    }
                })

            }
            ,yes: function(index, layero) {
                var attachId = $('#mIdName').attr('attachid');
                if (attachId == ''){
                    layer.msg('请上传文件');
                    return false;
                }
                else if($('#pas2').val() == ''){
                    layer.msg('请输入证书密码');
                    return false;
                }

                attachId += '*' + $('#mIdName').attr('attachName') + '*' + $('#pas2').val();

                 $.post('/syspara/updateSysParaByParaName',{
                     paraName:'PFX_ATTACH',
                     paraValue:attachId
                 },function(res){
                     if (res.flag){
                         layui.layer.close(index);
                     }
                 });

            }

        })
    });

    function shanchu(){
        $('#mIdName').html('请上传文件');
        $('#mIdName').attr('attachid','');
        $('#mIdName').attr('attachName','');
    }

    function addSign(title,signId){
        layui.layer.open({
            type: 1
            ,title: title
            ,btn:['确定']
            ,area:'40%'
            ,btnAlign: 'c'
            ,content:
                '  <div class="layui-row">\n' +
                '    <div class="layui-col-md8">\n' +
                '<form class="layui-form" lay-filter="formTest" style="margin-top: 20px;">' +

                '  <div class="layui-form-item">\n' +
                '    <div class="layui-inline">\n' +
                '      <label class="layui-form-label">电子印章<span style="color: red;">*</span></label>\n' +
                '      <div class="layui-input-inline">\n' +
                '        <input type="tel" name="signName" autocomplete="off" class="layui-input">\n' +
                '      </div>\n' +
                '    </div>\n' +
                '   </div>' +

                '  <div class="layui-form-item">\n' +
                '    <div class="layui-inline">\n' +
                '      <label class="layui-form-label">单位名称</label>\n' +
                '      <div class="layui-input-inline">\n' +
                '        <input type="text" name="signDept"  autocomplete="off" class="layui-input layui-disabled" disabled>\n' +
                '      </div>\n' +
                '    </div>\n' +
                '  </div>' +

                '  <div class="layui-form-item">\n' +
                '    <div class="layui-inline">\n' +
                '      <label class="layui-form-label">备注</label>\n' +
                '      <div class="layui-input-inline">\n' +
                '        <textarea placeholder="请输入内容" name="signDesc" class="layui-textarea"></textarea>\n' +
                '      </div>\n' +
                '    </div>\n' +
                '   </div>' +


                '  <div class="layui-form-item">\n' +
                '    <div class="layui-inline">\n' +
                '      <div class="layui-input-inline" style="margin-left: 110px;">\n' +
                '        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="test1">\n' +
                '           <i class="layui-icon">&#xe67c;</i>上传印章图片\n' +
                '         </button>\n' +
                '      </div>\n' +
                '    </div>\n' +
                '  </div>' +

                '</form>' +
                '</div>\n' +

                '    <div class="layui-col-md4">\n' +
                '       <img id="normalImg" src="" style="width:196px; height:200px" />' +
                '    </div>\n' +
                '  </div>'
            ,success: function(layero, index){

                //单位
                $('input[name="signDept"]').attr('deptId',deptId);
                $('input[name="signDept"]').val(deptName);


                //执行实例
                layui.upload.render({
                    elem: '#test1' //绑定元素
                    ,url: '/upload' //上传接口
                    ,accept:'images'
                    ,data:{
                        module:'xsign'
                    }
                    ,choose:function(obj){
                        var files = obj.pushFile();
                        obj.preview(function(index, file, result){
                            /*  console.log(index); //得到文件索引
                              console.log(file); //得到文件对象
                              console.log(result); //得到文件base64编码，比如图片*/
                            $('#normalImg').attr('src',result);
                            //obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增

                            //这里还可以做一些 append 文件列表 DOM 的操作

                            //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
                            //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
                        });
                    }
                    ,done: function(res){
                        //上传完毕回调
                        if (res.flag){
                            var obj = res.obj[0];
                            $('#normalImg').attr('attachId',obj.attachId);
                            $('#normalImg').attr('attachName',obj.attachName);
                        }
                    }
                    ,error: function(){
                        //请求异常回调
                    }
                });

                //回显
                if (signId != ''){
                    $.get('/xsign/getXSignModels',{
                        signId:signId
                    },function(res){
                        if (res.flag){
                            var obj = res.obj[0];
                            //名称
                            $('input[name="signName"]').val(obj.signName);

                            //单位
                            $('input[name="signDept"]').attr('deptId',obj.signDept);
                            $('input[name="signDept"]').val(obj.signDeptName);

                            $('textarea[name="signDesc"]').val(obj.signDesc);

                            $('#normalImg').attr('src',obj.signImg);
                            $('#normalImg').attr('attachId',obj.attachmentId);
                            $('#normalImg').attr('attachName',obj.attachmentName);

                        }

                    });
                }
            }
            ,yes: function(index, layero){
                let signName = $('input[name="signName"]').val();
                if (signName == ''){
                    layer.alert('电子印章名称为必填项。');
                    return false;
                }

                var obje = {
                    signId:signId
                    ,signName:$('input[name="signName"]').val()
                    ,signDept:$('input[name="signDept"]').attr('deptid')
                    ,signImg:$('#normalImg').attr('src')
                    ,signDesc:$('textarea[name="signDesc"]').val()
                    ,attachmentId:$('#normalImg').attr('attachId')
                    ,attachmentName:$('#normalImg').attr('attachName')
                }


                passwordSgin(obje);

                // layui.layer.close(index);
            }
        });
    }

    function passwordSgin(obje){
        layui.layer.open({
            type: 1
            , title: '输入密码'
            , btn: ['确定']
            , area: '30%'
            , btnAlign: 'c'
            , content: '<form class="layui-form" action="" lay-filter="example" style="margin-top: 20px;">' +
                '  <div class="layui-form-item">\n' +
                '    <label class="layui-form-label">输入密码</label>\n' +
                '    <div class="layui-input-inline">\n' +
                '      <input type="password" name="password1" placeholder="请输入密码" autocomplete="off" class="layui-input">\n' +
                '    </div>\n' +
                '  </div>' +
                '  <div class="layui-form-item">\n' +
                '    <label class="layui-form-label">确认密码</label>\n' +
                '    <div class="layui-input-inline">\n' +
                '      <input type="password" name="password2" placeholder="请确认密码" autocomplete="off" class="layui-input">\n' +
                '    </div>\n' +
                '  </div>' +
                '</form>'
            ,success: function(layero, index) {
            }
            ,yes: function(index, layero) {
                var password1 = $('input[name="password1"]').val();
                var password2 = $('input[name="password2"]').val();
                if (password1 == '' || password2 == ''){
                    layui.layer.alert('请输入密码', {icon: 2});
                    return false;
                }else if (password1 != password2){
                    layui.layer.alert('密码不一致', {icon: 2});
                    return false;
                }

                if (obje.signId == ''){
                    obje['signPwd'] = password2;
                }

                layer.load();
                $.post('/xsign/editXSign',obje,function(res){
                    if (res.flag){
                        layui.table.reload('demo');
                        layui.layer.closeAll();
                    }
                });

            }
        })
    }

    layui.use(['layer', 'form','table','upload'], function(){
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload,
            table = layui.table;
        //初始化表格
        table.render({
            elem: '#demo'
            ,url: '/xsign/getXSignModels' //数据接口
            ,page: false //开启分页
            ,skin:'line'
            ,cols: [[
                {field: 'signName', title: '电子印章',align:'center'}
                ,{field: 'signDeptName', title: '单位名称',align:'center'}
                ,{field: 'signUserName', title: '所属者',align:'center'}
                ,{field: 'wealth', title: '操作',align:'center',templet: function(d){
                        return '<button type="button" class="layui-btn layui-btn-warm layui-btn-xs" lay-event="detail">权限设置</button>\n' +
                            '<button type="button" class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">编辑</button>\n' +
                            '<button type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>';
                    }}
            ]]
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    // "count": res.total, //解析数据长度
                    "data": res.obj //解析数据列表
                };
            }
        });

        //监听行事件
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            var layEvent = obj.event;
            var tr = obj.tr;

            if(layEvent === 'detail'){ //设置权限

                layui.layer.open({
                    type: 1
                    , title: '权限设置'
                    , btn: ['确定']
                    , area: '30%'
                    , btnAlign: 'c'
                    , content: '<form class="layui-form" action="" lay-filter="example" style="margin-top: 20px;">' +
                        '  <div class="layui-form-item">\n' +
                        '    <label class="layui-form-label">权限用户</label>\n' +
                        '    <div class="layui-input-inline">\n' +
                        '        <textarea placeholder="请输入内容" id="user" name="user" class="layui-textarea"></textarea>\n' +
                        '    </div>\n' +
                        '    <div class="layui-form-mid">' +
                        '       <a style="color: blue;" id="useradd">添加</a> &nbsp <a id="userEmpty" style="color: red;">清空</a>'+
                        '    </div>' +
                        '  </div>' +

                        '  <div class="layui-form-item">\n' +
                        '    <label class="layui-form-label">权限部门</label>\n' +
                        '    <div class="layui-input-inline">\n' +
                        '        <textarea placeholder="请输入内容" id="dept" name="dept" class="layui-textarea"></textarea>\n' +
                        '    </div>\n' +
                        '    <div class="layui-form-mid">' +
                        '       <a style="color: blue;" id="deptadd">添加</a> &nbsp <a id="deptEmpty" style="color: red;">清空</a>'+
                        '    </div>' +
                        '  </div>' +

                        '  <div class="layui-form-item">\n' +
                        '    <label class="layui-form-label">权限角色</label>\n' +
                        '    <div class="layui-input-inline">\n' +
                        '        <textarea placeholder="请输入内容" name="priv" id="priv" class="layui-textarea"></textarea>\n' +
                        '    </div>\n' +
                        '    <div class="layui-form-mid">' +
                        '       <a style="color: blue;" id="privadd">添加</a> &nbsp <a id="privEmpty" style="color: red;">清空</a>'+
                        '    </div>' +
                        '  </div>' +
                        '</form>'
                    ,success: function(layero, index) {

                        //添加
                        $('#useradd').on('click',function(){
                            user_id='user';
                            $.popWindow('/common/selectUser');
                        })

                        $('#deptadd').click(function(){
                            dept_id="dept";
                            $.popWindow("/common/selectDept");
                        })
                        $('#privadd').on("click", function () {
                            priv_id = 'priv';
                            $.popWindow("/common/selectPriv");
                        });

                        //清空
                        $('#userEmpty').on('click',function(){
                            $('#user').attr('username','');
                            $('#user').attr('dataid','');
                            $('#user').attr('user_id','');
                            $('#user').attr('userprivname','');
                            $('#user').val('');
                        })
                        $('#deptEmpty').click(function(){
                            $('#dept').attr('deptname','');
                            $('#dept').attr('deptid','');
                            $('#dept').val('');
                        })
                        $('#privEmpty').on("click", function () {
                            $('#priv').attr('privid','');
                            $('#priv').attr('userpriv','');
                            $('#priv').val('');
                        });

                        //回显
                        $('#user').attr('user_id',data.userIds);
                        $('#user').attr('dataid',data.userIds);
                        $('#user').val(data.userNames);

                        $('#dept').attr('deptid',data.deptIds);
                        $('#dept').val(data.deptNames);

                        $('#priv').attr('userpriv',data.privIds);
                        $('#priv').val(data.privNames);
                    }
                    ,yes: function(index, layero) {
                        $.post('/xsign/editXSignPriv',{
                            signId:data.signId,
                            userIds:$('#user').attr('user_id'),
                            deptIds:$('#dept').attr('deptid'),
                            privIds:$('#priv').attr('privid'),

                        },function(res){
                            if (res.flag){
                                table.reload('demo');
                                layer.close(index);
                            }
                        });
                    }
                })
            }
            else if(layEvent === 'del'){ //删除
                layer.confirm('确定要删除么?', {icon: 3, title:'提示'}, function(index){
                    $.get('/xsign/delXSign',{
                        signId:data.signId
                    },function(res){
                        if (res.flag){
                            obj.del();
                            layer.close(index);
                        }
                    });
                });

            }
            else if(layEvent === 'edit'){ //编辑

                layui.layer.open({
                    type: 1
                    , title: '输入密码'
                    , btn: ['确定']
                    , area: '30%'
                    , btnAlign: 'c'
                    , content: '<form class="layui-form" action="" lay-filter="example" style="margin-top: 20px;">' +
                        '  <div class="layui-form-item">\n' +
                        '    <label class="layui-form-label">输入密码</label>\n' +
                        '    <div class="layui-input-inline">\n' +
                        '      <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">\n' +
                        '    </div>\n' +
                        '  </div>' +
                        '</form>'
                    ,success: function(layero, index) {
                    }
                    ,yes: function(index, layero) {
                        var password = $('input[name="password"]').val();
                        if (password == '' ){
                            layui.layer.alert('请输入密码', {icon: 2});
                            return false;
                        }
                        $.get('/xsign/isPwdTrue',{
                            signId:data.signId,
                            password:password
                        },function(res){
                            if (res.object){
                                addSign('编辑印章',data.signId);
                                layer.close(index);
                            }else{
                                layer.alert('密码错误', {icon: 2});
                            }
                        });

                    }
                })

            }
        });
    })
</script>
</html>
